<template>
  <div class="back-top" ref="backTop">
    <img src="@/assets/4 返回顶部 橙.png" alt="返回顶部">
    <p>返回顶部</p>
  </div>
</template>

<script>
export default {
  methods: {
    backtop() {
      // 返回顶部处理事件
      window.addEventListener('scroll', () => {
        if (window.scrollY > 400) {
          this.$refs.backTop.style.display = 'block';
          this.$refs.backTop.addEventListener('click', () => {
            scrollTo({
              top: 0,
              behavior: 'smooth'
            })
          })
        } else {
          this.$refs.backTop.style.display = 'none';
        }
      })
    }
  },
  mounted() {
    this.backtop()
  },
}
</script>

<style lang="less" scoped>
.back-top {
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
}

.back-top:hover {
  cursor: pointer;
}

.back-top img {
  width: 80px;
  height: 80px;
  
}

.back-top p {
  text-align: center;
  font-size: 8px;
  color: orange;
}
</style>